<!DOCTYPE html>
<html lang="en">

<head>
    <title>表单填写vue部分</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container mt-5" id="app">
    <form action="" method="post">
        package:<input name="brandName" class="form-control" v-model="brand.pack">
        moduleName:<input name="companyName" class="form-control"  v-model="brand.moduleName">
        author： <input name="ordered" class="form-control" v-model="brand.author">
        email：<input name="description" rows="5" cols="20" class="form-control" v-model="brand.email"></input>
        mainPath：<input name="description" rows="5" cols="20" class="form-control" v-model="brand.mainPath"></input>




        <button class="btn btn-primary " type="button" @click="submit()">提交</button>
    </form>
</div>

</body>

</html>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brand:{},
            }
        },
        methods:{
            submit(){
                that = this;
                //发送Ajax请求 完成添加功能
                axios({
                    method:"post",
                    url:"http://www.xiaomaoxiaoke.vip:8080//config/updateOrAdd",
                    data:that.brand
                }).then(function (response) {
                    alert(response.data);
                    //判断想响应是否成功

                }, function (err) {
                    console.log(err);
                })
            }
        },

    })

</script>
